<template>
  <!-- 全局布局 -->
  <div class="main">
    <TopNav />
    <div id="v-content" v-bind:style="{ minHeight: Height + 'px' }">
      <slot></slot>
    </div>
    <div class="foot">
      <p class="foot-p">黄恩俊搭建的大数据PASS平台</p>
    </div>
  </div>
</template>

<script>
import TopNav from "@/components/TopNav.vue";
export default {
  name: "Main",
  components: {
    TopNav,
  },
  data() {
    return {
      Height: 0,
    };
  },
  mounted() {
    //动态设置内容高度 让footer始终居底   header+footer的高度是160
    this.Height = document.documentElement.clientHeight - 160; //监听浏览器窗口变化
    window.onresize = () => {
      this.Height = document.documentElement.clientHeight - 160;
    };
  },
};
</script>

<style lang="less" scoped>
.foot {
  background-color: #181818;
  height: 100px;
}

#v-content {
  background-color: #f5f5f6;
}

.foot-p {
  color: #ffffff;
  padding-top: 35px;
}
</style>